<template>
  <!-- TreeSelect做侧边栏 -->
  <van-tree-select height="auto" :items="items" :main-active-index.sync="active">
    <template #content>
      <!-- 切换展示图片 -->
      <van-image v-if="active === 0" src="https://pic1.zhimg.com/80/v2-8e84a025bf544170d9d4f2be9d2cd814_720w.webp" />
      <van-image v-if="active === 1" src="https://pic4.zhimg.com/80/v2-74925f043ae70c0a495243ea6f499a4f_720w.webp" />
      <van-image v-if="active === 2" src="https://pic4.zhimg.com/80/v2-9a8d8c8c6ad873b3b83cd1431073e7f3_720w.webp" />
      <van-image v-if="active === 3" src="https://pic3.zhimg.com/80/v2-908944180ebf013aa36f7ebf7e4ba0f6_720w.webp" />
      <van-image v-if="active === 4" src="https://pic4.zhimg.com/80/v2-8c334c82ff5553ff873a7e2667b0e42f_720w.webp" />
      <van-image v-if="active === 5" src="https://pic1.zhimg.com/80/v2-b2f8850485837ec19b553779a2649604_720w.webp" />
      <van-image v-if="active === 6" src="https://pic3.zhimg.com/80/v2-c3f8e3106193e93f812f3f740cb11d1a_720w.webp" />
      <van-image v-if="active === 7" src="https://pic2.zhimg.com/80/v2-eb1fe07c65f7decdecbe6013279a1a59_720w.webp" />
      <van-image v-if="active === 8" src="https://pic3.zhimg.com/80/v2-768f9a244daa7caea32d4e0bc5d2c59a_720w.webp" />
      <van-image v-if="active === 9" src="https://pic2.zhimg.com/80/v2-6b4968148588d4ccb0d745f909ad5715_720w.webp" />
      <van-image v-if="active === 10" src="https://pic1.zhimg.com/80/v2-bda730f834c31a14c8c06ed8f7b4dff0_720w.webp" />
      <van-image v-if="active === 11" src="https://pic3.zhimg.com/80/v2-1733ad50c0e526d2b7a031b5b29e4c32_720w.webp" />
      <!-- 切换介绍文字 -->
      <p v-if="active === 0">{{ ylyd }}</p>
      <p v-if="active === 1">{{ lyyd }}</p>
      <p v-if="active === 2">{{ ytyd }}</p>
      <p v-if="active === 3">{{ ycyd }}</p>
      <p v-if="active === 4">{{ ymyd }}</p>
      <p v-if="active === 5">{{ nwyd }}</p>
      <p v-if="active === 6">{{ lysd }}</p>
      <p v-if="active === 7">{{ qsd }}</p>
      <p v-if="active === 8">{{ nh }}</p>
      <p v-if="active === 9">{{ zd }}</p>
      <p v-if="active === 10">{{ jfzd }}</p>
      <p v-if="active === 11">{{ kzd }}</p>
    </template>
  </van-tree-select>
</template>

<script>
import { mapState } from 'vuex';
export default {
  // 标签
  data() {
    return {
      active: 0,
      items: [{ text: '雁翎腰刀' }, { text: '柳叶腰刀' }, { text: '鱼头腰刀' }, { text: '雁翅腰刀' }, { text: '雁毛腰刀' },
      { text: '牛尾腰刀' }, { text: '柳叶手刀' }, { text: '翘首刀' }, { text: '内弧' }, { text: '直刀' }, { text: '剑锋直刀' }, { text: '宽直刀' }],
    };
  },
  // 用vuex导入介绍文字
  computed: {
    ...mapState(['ylyd', 'lyyd', 'ytyd', 'ycyd', 'ymyd', 'nwyd', 'lysd', 'qsd', 'nh', 'zd', 'jfzd', 'kzd'])
  }
};
</script>